<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>

                <div class="title">实名认证</div>
            </div>
        </div>

        <van-panel title="上传身份证正面照片" desc="保证文字清晰可见">
            <div class="panel-body">
                <div class="panel-header">
                    <div class="item">参考图片</div>
                    <div class="item">你的照片</div>
                </div>
                <div class="panel-footer">
                    <div class="item">
                        <img class="img" src="@/assets/images/code_1.png" alt="">
                    </div>
                    <div class="item">
                        <img class="img" v-if="front_url!='' && back_url!=''" :src="front_url" alt="">
                        <van-uploader v-if="front_url=='' || back_url==''" v-model="code_front" @oversize="onOversize" :max-size="5 * 1024 * 1024" :after-read="upfront" :max-count="1" style="margin-top: .15rem" />
                    </div>
                </div>
            </div>
        </van-panel>

        <van-panel title="上传身份证反面照片" desc="保证文字清晰可见">
            <div class="panel-body">
                <div class="panel-header">
                    <div class="item">参考图片</div>
                    <div class="item">你的照片</div>
                </div>
                <div class="panel-footer">
                    <div class="item">
                        <img class="img" src="@/assets/images/code_2.png" alt="">
                    </div>
                    <div class="item">
                        <img class="img" v-if="front_url!='' && back_url!=''" :src="back_url" alt="">
                        <van-uploader v-if="front_url=='' || back_url==''" v-model="code_back" @oversize="onOversize" :max-size="5 * 1024 * 1024" :after-read="upback" :max-count="1" style="margin-top: .15rem" />
                    </div>
                </div>
            </div>
        </van-panel>

        <van-field class="input" v-model="alipay" label="支付宝账号" placeholder="请输入支付宝收款账号" />

        <div class="btn-box">
            <van-button type="info" class="btn-primary" @click="saveProfile">提   交</van-button>
        </div>
    </div>


</template>

<script>
    export default {
        name: "forget",
        components: {},
        data() {
            return {
                front_url:"",
                back_url:"",
                alipay:"",
                code_front:[],
                code_back:[],
                userInfo:[],
            }
        },
        computed: {},
        mounted: function () {
            var that=this;
            this.$api.member.index().then(res => {
                var res = res.data;
                this.userInfo=res.data;
                if (res.data.code_front!= "" && res.data.code_front!= null) {
                    this.front_url=res.data.code_front;
                }
                if (res.data.code_behind!= "" && res.data.code_behind!= null) {
                    this.back_url=res.data.code_behind;
                }

                if(res.data.pwd==0){
                    this.$dialog.confirm({
                        message: '您还没有设置登录密码，现在去设置吗！',
                    }).then(() => {
                        this.$router.push({
                            path:'/forget'
                        })
                    }).catch(() => {
                        this.$router.push({
                            path:'/user'
                        })
                    });
                }

                this.alipay=res.data.alipay_user;
            });

        },
        methods: {
            //上传图片
            upfront(file) {
                file.status = 'uploading';
                file.message = '上传中...';

                let fd = new FormData();
                fd.append('file', file.file);

                this.$api.index.userUpload(fd).then(res => {
                    var res = res.data;
                    if (res.code == 1) {
                        file.status="done";
                        this.front_url=this.img(res.data.url);
                    } else {
                        this.$toast(res.msg);
                    }
                });
            },
            //上传图片
            upback(file) {
                file.status = 'uploading';
                file.message = '上传中...';

                let fd = new FormData();
                fd.append('file', file.file);

                this.$api.index.userUpload(fd).then(res => {
                    var res = res.data;
                    if (res.code == 1) {
                        file.status="done";
                        this.back_url=this.img(res.data.url);
                    } else {
                        this.$toast(res.msg);
                    }
                });
            },

            onOversize(file) {
                this.$dialog.error("上传失败，图片不能大于5M");
            },

            saveProfile(){
                console.log(this.front_url)
                if (this.front_url== "" || this.front_url== null) {
                    this.$toast('请上传身份证正面照片！');
                    return;
                }
                if (this.back_url== "" || this.back_url== null) {
                    this.$toast('请上传身份证反面照片！');
                    return;
                }
                if (this.alipay== "") {
                    this.$toast('请输入支付宝收款账号！');
                    return;
                }

                let postData = {
                    code_front:this.front_url,
                    code_behind:this.back_url,
                    alipay_user:this.alipay,
                };
                this.$api.member.update({data:postData}).then(res=>{
                    if(res.data.status == 0){
                        this.$dialog.alert({
                            message: res.data.msg
                        }).then(() => {});
                    } else {
                        this.$toast("提交成功，等待审核！");
                        this.$router.replace({
                            path: '/user',
                            query: {
                                redirect: this.$router.currentRoute.fullPath
                            }
                        });
                    }
                });
            },

        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
    .panel-body{
        padding: 20px 28px;

        .panel-header{
            @include wh(100%,30px,30px);
            text-align: center;

            .item{
                float: left;
                width: 50%;
                color: #888;

            }
        }

        .panel-footer{
            @include wh(100%,300px);

            .item{
                float:left;
                @include wh(50%,300px);

                display: flex;
                justify-content: center;
                align-items: center;

                .img{
                    width: 80%;
                }
            }
        }
    }
</style>
